<template>
	<view>
		<scroll-view scroll-y="true" style="height: calc(100vh - 134px)">
			<view class="shift-base-info-wrap">
				<view class="base-info-content" v-if="detail">
					<view class="content-wrap" v-for="(item, index) in labelValueList" :key="index">
						<view class="content-label">
							{{item.label}}：
						</view>
						<view class="content-value">
							{{detail[item.value] || '--'}}
						</view>
					</view>
				</view>
			</view>

			<view class="form-container">
				<uni-forms ref="form" :modelValue="detail" labelPosition="top">
					<view class="background-white">
						<uni-forms-item name="feedbackContent" :rules="[{ required: true, errorMessage: '必填项不能为空' }]">
							<textarea v-model="detail.feedbackContent" class="text-area" placeholder="请输入"
								placeholder-class="form-placeholder__style" maxlength="500" />
						</uni-forms-item>
					</view>
				</uni-forms>
			</view>
		</scroll-view>
		<view class="submit-group">
			<button class="u-button-cancel margin-left-xs" type="default" :ripple="true" @click="navigateBack">
				取消
			</button>
			<button class="u-button margin-right-xs" type="primary" :ripple="true" @click="submit">
				提交
			</button>
		</view>
	</view>
</template>

<script>
	import {
		getTrainingResearchDetail,
		submitTrainingResearch
	} from '@/api/educational-training/training-research'
	export default {
		name: "detail",
		data() {
			return {
				id: '',
				labelValueList: [{
						label: '调研名称',
						value: 'surveyName'
					}, {
						label: '发布人',
						value: 'publishUserName'
					},
					{
						label: '调研内容',
						value: 'surveyContent'
					}
				],
				detail: {}
			}
		},
		onLoad({
			id
		}) {
			this.id = id
		},
		onReady() {
			this.getDetail()
		},
		methods: {
			getDetail() {
				getTrainingResearchDetail(this.id).then(res => {
					this.detail = res.data
				})
			},
			async submit() {
				await this.$refs.form.validate();
				uni.showModal({
					content: '提交后，填写的内容将不可以修改，请确定填写无误后再提交',
					confirmText: '确定',
					success: async (res) => {
						if (res.confirm) {
							await submitTrainingResearch({
								...this.detail
							});
							uni.showToast({
								title: '提交成功！',
								icon: 'success',
							});
							setTimeout(() => {
								uni.navigateBack();
							}, 1000);
						}
					},
				});
			},
			navigateBack() {
				uni.navigateBack();
			},
		}
	}
</script>

<style lang="scss" scoped>
	.shift-base-info-wrap {
		.base-info-header {
			padding: 20rpx 0 20rpx 30rpx;
			font-size: 26rpx;
			color: #999999;
			line-height: 37rpx;
			background-color: #F5F5F5;
		}

		.base-info-content {
			background-color: #fff;
			padding-left: 30rpx;

			.content-wrap {
				display: flex;
				align-items: center;
				border-bottom: 1rpx solid #D5D7E3;
				padding: 24rpx 30rpx 24rpx 0;

				.content-label,
				.content-value {
					font-size: 28rpx;
					line-height: 40rpx;
				}

				.content-label {
					color: #333333;
					min-width: 140rpx;
				}

				.content-value {
					color: #666666;
				}
			}
		}
	}

	.submit-group {
		background: #fff;
		z-index: 9;
		padding: 10px 30px;
	}
</style>